<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('字典数据')"/>
</head>
<body>
<div class="layui-layout layui-layout-iframe">
    <div class="layui-fluid">
        <div class="layui-card">
            <!--search form-->
            <input type="hidden" id="dictType" th:value="${dict.dictType}" />
            <!--table actcion-->
            <div class="layui-card-body">
                <script type="text/html" id="table_dict_data_toolbar">
                    <div class="layui-btn-group" shiro:hasPermission="system:dict_data:add">
                        <button class="layui-btn layui-btn-sm" lay-event="add" shiro:hasPermission="system:dict_data:add"><i class="layui-icon">&#xe654;</i>新增</button>
                        <button class="layui-btn layui-btn-sm" lay-event="batchdel" shiro:hasPermission="system:dict_data:remove"><i class="layui-icon">&#xe640;</i>删除</button>
                    </div>
                </script>
                <table id="table_dict_data" lay-filter="table_dict_data"></table>
                <script type="text/html" id="col_operation">
                    <a shiro:hasPermission="system:dict_data:edit" href="javascript:;" lay-event="edit"><i class="fa fa-edit"></i>编辑</a><span class="splitor">|</span>
                    <a shiro:hasPermission="system:dict_data:remove" href="javascript:;" lay-event="del"><i class="fa fa-remove"></i>删除</a>
                </script>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:dict:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:dict:remove')}]];
    var prefix = ctx + "system/dict/data";
</script>
<script>
    layui.use(['common'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            common = layui.common,
            table = layui.table;
        //页面事件列表
        var active = {
            reload: function () {
                search();
            },
            remove: function (ids) {
                common.ajaxRemove(prefix + "/remove", ids, function (res) {
                    active['reload'].call(this);
                });
            }
        };
        table.render({
            elem: '#table_dict_data'
            , method: 'post'
            , url: prefix + "/list"
            , where: {"dictType": $("#dictType").val()}
            , toolbar: '#table_dict_data_toolbar'
            , defaultToolbar:['filter', 'exports']
            , autoSort: false 	//关闭前端排序 使用后端排序
            , limit: getPageSize()
            , limits: getPageList()
            , text: getLoadErrorMsg()
            , page: true
            , cols: new Array([
                {type: 'checkbox', width: 40}
                , {field: 'dictLabel', title: '标签'}
                , {field: 'dictValue', title: '键值'}
                , {field: 'status', title: '状态',width:80,
                    templet: function (item) {
                        if (item.status === "0"){
                            return "<span class=\"layui-btn layui-btn-xs layui-btn-radius\">正常</span>";
                        } else {
                            return "<span class=\"layui-btn layui-btn-xs layui-btn-danger layui-btn-radius\">停用</span>";
                        }
                    }
                }
                , {field: 'remark', title: '备注'}
                , {field: 'createTime', title: '创建时间', sort: true,width:160}
                , {title: '操作', align: 'center', width: 100, toolbar: '#col_operation'}
            ])
        });
        //表格工具栏按钮事件
        table.on('toolbar(table_dict_data)', function (obj) {
            switch (obj.event) {
                case 'batchdel':
                    var checks = table.checkStatus('table_dict_data');
                    var ids = common.joinArray(checks.data, "dictCode");
                    active['remove'].call(this, ids);
                    break;
                case 'add':
                    showSaveDialog('新增字典数据', prefix + '/add/'+$("#dictType").val(),'btn-add');
                    break;
            }
        });
        //表格事件
        table.on('tool(table_dict_data)', function (obj) {
            switch (obj.event) {
                case 'del':
                    active['remove'].call(this, obj.data.dictCode);
                    break;
                case 'edit':
                    showSaveDialog('修改字典数据', prefix + '/edit/' + obj.data.dictCode,'btn-edit');
                    break;
            }
        });
        //监听排序事件
        table.on('sort(table_dict_data)', function (obj) {
            var field = {dictType: $("#dictType").val()};
            field.orderByColumn = obj.field;
            field.isAsc = obj.type;
            table.reload('table_dict_data', {where: field, page: {curr: 1}});//执行重载
        });
    });

    //展示保存表单弹出层
    function showSaveDialog(title,url,formSubmitBtnId){
        layer.open({
            type: 2,
            title: title,
            shade: false,
            fixed: false,
            area: ['800px', '600px'],
            content: url,
            btn: ["保存", "取消"],
            yes: function (index, layero) {
                var submitID = formSubmitBtnId;//表单提交按钮id
                var submit = layero.find('iframe').contents().find('#' + submitID);//button obj
                layero.find('iframe')[0].contentWindow.successCallback = function () {
                    parent.layer.closeAll();
                    parent.layer.alert('保存成功');
                    parent.layui.table.reload('table_dict_data'); //刷新表格数据
                };
                submit.trigger('click');
            }
            , cancel: function (index, layero) {
                layui.layer.close(index);
                return false;
            }
        });
    }

    //表格查询
    function search() {
        var field = {dictType: $("#dictType").val()};
        var sortParam = getSort('table_dict');
        if (sortParam) {
            field.orderByColumn = sortParam.sortField;
            field.isAsc = sortParam.sortMethod;
        }
        //执行重载
        var options = {where: field, page: {curr: 1}};
        layui.table.reload('table_dict_data', options);
    }
</script>
</body>
</html>